<!doctype html>
<html>

	<head>
		<meta name="keywords" content="甜爱，SweetLove,甜品，甜点，生日蛋糕，冰淇淋，冰品" />
		<meta name="description" content="甜爱网上商城是专注于甜品销售、进口的网站，各种甜品、甜点齐全，还有解暑的各种冰品任顾客挑选，让他们感受到爱的温馨。">
		<meta charset="utf-8">
		<title>欢迎注册！</title>
		<link rel="shortcut icon" href="images/logo_01.png">
		<link rel="stylesheet" href="css/register.css">
		<link rel="shortcut icon" href="favicon.ico">
		<link rel="stylesheet" href="css/iconfont.css">
		<link rel="stylesheet" href="css/global.css">
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<link rel="stylesheet" href="css/bootstrap-theme.min.css">
		<link rel="stylesheet" href="css/swiper.min.css">
		<link rel="stylesheet" href="css/styles.css">
		<link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.css">
	</head>

	<body>
		<!--页头-->
		<div id="dingdan"></div>
		<div id="headCon">
			<div>

			</div>
			<ul>
				<a href="index.html">
					<li></li>
				</a>
				<span></span>
				<p>用户注册</p>
				<!--<ol>
            <li>
            	<div class="my"><img src="images/shopCar_08.png"></div>
                <p class="red">我的购物车</p>
            </li>
            <li>
            	<div class="order"><img src="images/pay_03.jpg"></div>
                <p>确认订单</p>
            </li>
            <li class="pay">
            	<div class="pay"><img src="images/pay_05.jpg"></div>
                <p>支付</p>
            </li>
            <li class="bingo">
            	<div class="bingo"><img src="images/shopCar_05.png"></div>
                <p>完成</p>
            </li>
        </ol>-->
			</ul>
		</div>
		<!--内容-->
		<div id="contentCon">
			<!--进度条-->
			<div class="step-flow-box" style="margin-left: 250px;margin-right: 250px;">
				<div class="step-flow__bd">
					<div class="step-flow__li step-flow__li_done">
						<div class="step-flow__state"><i class="iconfont icon-ok"></i></div>
						<p class="step-flow__title-top">验证手机</p>
					</div>
					<div class="step-flow__line step-flow__line_ing">
						<div class="step-flow__process"></div>
					</div>
					<div class="step-flow__li">
						<div class="step-flow__state"><i class="iconfont icon-ok"></i></div>
						<p class="step-flow__title-top">填写个人信息</p>
					</div>
					<div class="step-flow__line">
						<div class="step-flow__process"></div>
					</div>
					<div class="step-flow__li">
						<div class="step-flow__state"><i class="iconfont icon-ok"></i></div>
						<p class="step-flow__title-top">完成</p>
					</div>
				</div>
			</div>
			<form id="data_">
				<ul>
					<p>手机号码：</p>
					<input name="tel" id="tel" type="text" placeholder="请输入手机号码" onfocus="upbrcl(this),this.placeholder='请输入手机号'" oninput="value=value.replace(/\D+/,'')" maxlength="11">
					<span style="color: red;"></span>
				</ul>
				<ol>
					<p>验证码：</p>
					<input name="code" id="code" type="tel" onfocus="upbrcl(this),this.placeholder='验证码'" placeholder="验证码" oninput="value=value.replace(/\D+/,'')" maxlength="6">
					<span style="color: red;"></span>
					<button id="hqyzm" style="cursor: pointer;">获取验证码<span id="djs"></span></button>
					<span id="code_er" style="color: red;"></span>
				</ol>
				<li>
					<input id="xyxx" type="checkbox">
					<p>我已阅读并同意</p>
					<a href="#">《甜爱服务协议》</a>
					<span id="tsgx" style="color: red;">
						
					</span>
				</li>
				<a id="yz" style="text-decoration: none;cursor: pointer;border-radius: 5px;">注册</a>
			</form>
		</div>
		<!--页脚-->
		<div id="dibu"></div>
	</body>
	<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
	<script>
		//顶端导入
		$("#dingdan").load("index_head.html");
		$("#dibu").load("底部页面.html");

		//非法填入 变样式
		function upbrcl(z) {
			z.style.borderColor = "#d2d2d2";
			$(z).next().empty();
			$("#code_er").empty();
		}

		//获取验证码
		$("#hqyzm").click(function() {
			$("#tel").next().empty();
			if($("#tel").val() == "") {
				$("#tel").next().append("<i class=\"fa fa-times\" aria-hidden=\"true\"></i>手机号为空");
				return false;
			} else if($("#tel").val().length != 11) {
				$("#tel").next().append("<i class=\"fa fa-times\" aria-hidden=\"true\"></i>手机格式不对");
				return false;
			} else {

			}

			var yzm = document.getElementById("hqyzm");
			yzm.disabled = true;
			yzm.style.backgroundColor = "ghostwhite"
			yzm.style.color = "gray";
			var i = 60;
			//锁定发送短信按钮
			var z = setInterval(function() {
				document.getElementById("djs").innerHTML = "(" + i + ")";
				if(i == 0) {
					yzm.disabled = false;
					yzm.style.backgroundColor = "#e5e5e5"
					yzm.style.color = "#4C4C4C";
					clearTimeout(z);
					document.getElementById("djs").innerHTML = "";
				}
				i -= 1;
			}, 1000);
			//调用后台发送短信
			$.ajax({
				url: 'http://localhost:16111/user/g_send_dx',
				type: 'post',
				dataType: 'text',
				data: {
					tel: $("#tel").val().trim()
				},
				success: function(data) {
					console.log("短信获取成功")
				}
			});

		});
		//验证手机
		$("#yz").click(function() {
			$("#tel").next().empty();
			var tel = document.getElementById("tel");
			var code = document.getElementById("code");
			var xyxx = document.getElementById("xyxx");
			var tsgx = document.getElementById("tsgx");
			if(!xyxx.checked) {
				var i = 0;
				tsgx.innerHTML = "请勾选协议";
				var p = setInterval(function() {

					if((i % 2) == 0) {
						tsgx.innerHTML = "";

					} else {
						tsgx.innerHTML = "请勾选协议";
					}
					i += 1;
					if(i == 7) {
						clearInterval(p);
					}
				}, 1000);

			} else if(tel.value == "") {
				tel.style.borderColor = "red";
				tel.placeholder = "手机号为空 请填写账号";
				$("#tel").next().append("<i class=\"fa fa-times\" aria-hidden=\"true\"></i>手机号为空");
			} else if(tel.value.length != 11) {
				tel.value = "";
				tel.style.borderColor = "red";
				tel.placeholder = "手机号格式不对";
				$("#tel").next().append("<i class=\"fa fa-times\" aria-hidden=\"true\"></i>手机格式不对");
			} else if(code.value == "") {
				code.style.borderColor = "red";
				code.placeholder = "验证为空"
			} else if(code.value.length != 6) {
				code.style.borderColor = "red";
				$("#code_er").append("<i class=\"fa fa-times\" aria-hidden=\"true\"></i>验证码有误")
			} else {
				x();
			}

		});

		function x() {
			$.ajax({
				url: 'http://localhost:16111/user/g_yz_tel',
				type: 'post',
				dataType: 'json',
				data: $("#data_").serialize(),
				success: function(data) {
					if(data.code == 1) {
						location.href = "registeryz.html";
						localStorage.setItem("tel",$("#tel").val().trim())
					} else if(data.code == -1) {
                        code.style.borderColor = "red";
				        $("#code_er").append("<i class=\"fa fa-times\" aria-hidden=\"true\"></i>验证码有误")
					}else{
						$("#tel").next().append("<i class=\"fa fa-times\" aria-hidden=\"true\"></i>手机号已被注册可以直接登录");
					}
				}
			});
		};
	</script>

</html>